<template>
  <div class="edit">
    <div class="edit-container">
      <!-- <div class="preview">
        预览
        <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </div> -->

      <el-form ref="form" :model="form">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>

      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
      ></quill-editor>

      <el-row>
        <br>
        <el-button type="success">发布</el-button>
      </el-row>

      <p>点击下方按钮文件上传到七牛云</p>
      <upLoad></upLoad>
    </div>

    <div class="ql-editor html-box" v-html="content"></div>
  </div>
</template>

<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// import upLoad from '@/components/Common/upload'
import upLoad from '@/components/Common/upLoad.vue'

export default {
  name: 'Edit',
  components: {
    quillEditor,
    upLoad
  },
  data() {
    return {
      value: true,
      form: {
        name: ''
      },
      content: '<p>I am Example</p>', // 文章内容
      editorOption: {
        // 编辑器选项
        placeholder: '请输入内容'
      }
    }
  },
  methods: {
    onEditorBlur(quill) {

    },
    onEditorFocus(quill) {

    },
    onEditorReady(quill) {

    },
    onEditorChange({ quill, html, text }) {
      this.content = html
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.edit-container {
  padding: 15px;
  box-sizing: border-box;
  width: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  min-height: 500px;
}
.preview {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 50;
}
.html-box {
  width: 50%;
  padding: 15px;
  box-sizing: border-box;
  border: solid 1px #ededed;
  background-color: antiquewhite;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
}
</style>
